<template>
	<!-- 小区活动 -->
	<view class="home-activity">
		<view class="home-activity-top">
			<view class="home-activity-title">
				小区活动
			</view>
			<image src="../../static/images/newIcon/icon/go.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
		</view>
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120" v-for="item in list"
				:key="item.id">
				<view :id="item.id" class="scroll-view-item_H">
					<image :src="item.src" mode="" style=""></image>
					<!-- <view class="">
						{{item.text}}
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list: [{
						id: 1,
						// src: '../../static/images/newIcon/icon/huodong1.png',
						src:'',
						text: '2021小区亲子团建活动火热报名中'
					},
					{
						id: 2,
						src:'',
						// src: '../../static/images/newIcon/icon/huodong2.jpg',
						text: '相约晚上七点半广场跳舞'
					},
				]
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},

		}
	}
</script>

<style scoped>
	.home-activity {
		padding: 38rpx;
	}

	.home-activity-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home-activity-title {
		padding-left: 30rpx;
		position: relative;
		font-size: 32rpx;
		color: #333333;
	}

	.home-activity-title::before {
		content: '';
		background: #4874FF;
		position: absolute;
		display: block;
		width: 17rpx;
		height: 29rpx;
		top: 8rpx;
		right: 0;
		bottom: -1rpx;
		left: 0;
		border-radius: 9rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		display: flex;
	}

	.scroll-view-item_H {
		width: 200rpx;
		height: 100rpx;
		display: inline-block;
	}
</style>
